<template>
    <div class="fullScreen">
        <m-header :msg="'绑定'"></m-header>
        <div class="he-fv bg-c-wh tx-s-14 tx-c-222">
            <!-- 请输入QQ帐号 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_qq mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input v-model="QQ" class="wd-fh input-ol-n" type="number" placeholder="请输入QQ帐号"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                &nbsp;&nbsp;•&nbsp;&nbsp;请输入真实的QQ帐号
            </div>
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_name mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input v-model="realname" class="input-ol-n wd-fh" placeholder="请输入真实姓名"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                &nbsp;&nbsp;•&nbsp;&nbsp;真实姓名必须与您银行卡的账户姓名相同，否则不能提现
            </div> 
            <div class="submit-btn mar-t-3" @click="confirm">提交</div>
            <div class="cancel-btn" @click="cancel">重置</div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import Trans from '../../common/js/eventTrans'
import { approveName } from '../../common/js/axiosUtil' 
import { getClass } from '../../common/js/common'
export default {
    data () {
        return {
            QQ : '',
            realname : ''
        }
    }, 
    methods: { 
        confirm () { 
            // 通过ClassName获取需填项
            const arr = getClass("input-ol-n")
            // 判断各项是否已填写
            if(this.$checkWrite(arr, 'toast')){
                return
            }
            this.$toast('提交中...', 1000000)
            let params = this.$params(1)
            params.append('qq', this.QQ)
            params.append('realname', this.realname)
            approveName(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){
                    this.$toast('提交成功', 1000)
                    // 刷新首页查询姓名方法
                    Trans.$emit('checkUserkName')
                    // 返回上一页 
                    let _this = this
                    setTimeout(function(){
                        _this.$toastClose()
                        _this.$router.go(-1)
                    }, 1000)
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        cancel () {
            let arr = getClass("input-ol-n")
            for(let i = 0; i <arr.length; i++){
                arr[i].value = ''
            }
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .line-box
        padding: .5rem 1rem
        line-height: 2rem  
    .mar-r
        margin-right: .5rem
    .psw-but
        height : 2rem
        width : 2rem
        border-bottom : 1px solid $color-f0
    .tx-line
        color : $color-6
        font-size : $fonts-12
        margin : 0 1rem .25rem 1rem
</style>

